import React from 'react'
import _ from 'underscore'
import Modal from 'lib/components/Modal.jsx'
import {create,update} from '../apis/urlGroup'
import dispatcher from 'lib/dispatcher'
import {Success,Info,Warning} from 'lib/components/Notify.jsx'
const fields = [
  'id','domainId','name','pattern','enable','hidden'
]
export default class NewRuleForm extends Modal{
  constructor(props){
    super(props)
    this.state = {
      saving:false,
      errors:{}
    }
    this.saveAction = this.saveAction.bind(this)
  }
  saveAction(){
    if(this.state.saving){
      return ;
    }
    var data = _(fields).chain().map((field) => {
      var $dom = $(this.refs[field])
      if($dom.attr('type')==='checkbox'){
        return [field,$dom.prop('checked')]
      }else{
        return [field,$dom.val()]
      }
    }).filter((p) => p[1]!==null).object().value()
    var api = this.props.urlGroup?update(data):create(data)
    api.post().then((res,params) => {
      if(res.result === true){
        dispatcher.dispatch({
          $type:'update_urlgroup',
          urlGroup:res
        })
        Success('提交成功！')
        this.close();
      }
    }, (err) => {
      this.setState({
        saving:false,
        errors:err.errors
      })
    },() => {
      this.setState({
        saving:true,
        errors:null
      })
    })
  }
  renderHeader(){
    return (
      <h4>创建URL匹配规则</h4>
    )
  }
  renderBody(){
    return (
      <div className="form-group horizontal">
        <input type="hidden" ref="id" defaultValue={this.props.urlGroup?this.props.urlGroup.id:null}/>
        <ul>
          <li key="domainId">
            <label className="control-label">HOST</label>
            <select ref="domainId" defaultValue={this.props.urlGroup?this.props.urlGroup.domainId:null}>
              {
                this.props.domains.map((domain) => {
                  return (
                    <option value={domain.id} key={domain.id}>{domain.name}</option>
                  )
                })
              }
            </select>
          </li>
          <li key="name">
            <label className="control-label">名称</label>
            <input className="input-text" ref="name" defaultValue={this.props.urlGroup?this.props.urlGroup.name:null} />
            {
              this.state.errors&&this.state.errors['name']?(
                <span className="msg-error">{this.state.errors['name']}</span>
              ):null
            }
          </li>
          <li key="pattern">
            <label className="control-label">匹配模式</label>
            <input className="input-text" ref="pattern" defaultValue={this.props.urlGroup?this.props.urlGroup.pattern:null} />
            {
              this.state.errors&&this.state.errors['pattern']?(
                <span className="msg-error">{this.state.errors['pattern']}</span>
              ):null
            }
          </li>
          <li key="enable">
            <label>
              <input type="checkbox" ref="enable" defaultChecked={this.props.urlGroup?this.props.urlGroup.enable:null} />
              是否启用
            </label>
          </li>
          <li key="hidden">
            <label>
              <input type="checkbox" ref="hidden" defaultChecked={this.props.urlGroup?this.props.urlGroup.hidden:null} />
              是否忽略
            </label>
          </li>
        </ul>
      </div>
    )
  }
  renderFooter(){
    return (
      <div>
        {
          this.state.saving?(
            <span>保存中...</span>
          ):(
            <button className="btn-green" onClick={this.saveAction} type="button">保存</button>
          )
        }
      </div>
    )
  }
}
